<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      <a-button v-if="record.openType==='url'" type="primary" @click="toHandle">{{ $t('m.system.announcement.other.qu-chu-li') }}</a-button>
    </template>
    <a-card class="daily-article">
      <a-card-meta
        :title="record.titile"
        :description="$t('m.system.announcement.entity.sender') + '：'+record.sender + ',  '+ $t('m.system.announcement.entity.sendTime') + '：' + record.sendTime">
      </a-card-meta>
      <a-divider/>
      <span v-html="record.msgContent" class="article-content"></span>
    </a-card>
  </ych-modal>
</template>

<script>

  export default {
    name: 'SysAnnouncementModal',
    data () {
      return {
        title: this.$t('m.system.announcement.other.msg_label'),
        record: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        visible: false,
      }
    },
    methods: {
      detail (record) {
        this.visible = true
        this.record = record
      },
      handleCancel () {
        this.visible = false
      },
      toHandle () {
        if (this.record.openType === 'url') {
          this.visible = false
          //链接跳转
          this.$router.push({ path: this.record.openPage }).catch(err => {})
        }
      },
    }
  }
</script>

<style scoped lang="less">
  .daily-article {
    .article-button {
      font-size: 1.2rem !important;
    }

    .ant-card-body {
      padding: 18px !important;
    }

    .ant-card-head {
      padding: 0 1rem;
    }

    .ant-card-meta {
      margin-bottom: 1rem;
    }

    .article-content {
      p {
        word-wrap: break-word;
        word-break: break-all;
        text-overflow: initial;
        white-space: normal;
        font-size: .9rem !important;
        margin-bottom: .8rem;
      }
    }
  }
</style>
